練習1

1. Vue 將資料呈現於畫面上 codepen
2. Vue 創建資料 codepen

// html
<div id="app">
  <div>難以飛躍的 {{ rock }} </div>
  <div>轉角遇到 <b v-text="wall"></b></div>
</div>

// JS
new Vue({
  el:'#app',
  data:{
    rock: '巨大的岩石',
    wall: '牆壁'
  }
})

// html
<div id="app">
  小明招喚 {{ variable }} 來擋住敵人的去路
</div>

// JS
new Vue({
  el: '#app',
  data: {
    variable: '哥吉拉'
  }
})

練習2

Vue 動態屬性 codepen

// html
<div id="app">
  <img v-bind:src="imgUrl" :alt="imgAlt">  
  <div :class="{river:isChecked}">這裡有一條河</div>
  <label><input type="checkbox" v-model="isChecked">真心鎮的警察是否靠近 {{ isChecked }}</label>
</div>

// JS
new Vue({
  el: '#app',
  data: {
    imgUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80',
    imgAlt: '這是海洋',
    
    isChecked: false
  }
})

練習3

Vue v-for codepen

// html
<div id="app" class="container">
  <div class="row">
    <div class="col-md-4">      
      <div class="card" v-for="(item,key) in animatedCharacter" :key="item.name">
        <img :src="item.imgUrl" class="card-img-top" :alt="item.name">
        <div class="card-body text-center">
          <h5 class="card-title">{{ item.name }}</h5>
          <p>{{ item.skill }}</p>
        </div>
      </div>      
    </div>
  </div>
</div>

// JS
new Vue({
  el: '#app',
  data: {
    animatedCharacter: [
      {        
        name: '白金之心',
        skill: '時間暫停',
        imgUrl: 'https://i1.hdslb.com/bfs/archive/e59e3fc7011bdd648dd108f68a15567455556215.jpg'
      },
      {        
        name: '漩渦鳴人',
        skill: '螺旋丸',
        imgUrl: 'https://img1.how01.com/imgs/e2/0b/1/3b0b0000f8b6b36cd26f.jpg'
      },
      {
        name: '我妻善逸',
        skill: '雷之呼吸',
        imgUrl: 'https://twgreatdaily.com/images/elastic/04U/04UjyG0BMH2_cNUgG420.jpg'
      }
    ]
  }
})

Resources

練習4

Vue v-on codepen

// html
<div id="app" class="container">
  陷阱： <button type="button" class="btn btn-danger" v-on:click="trap">點擊就會觸發的陷阱</button>  
  
<!--   v-on 可以使用 @ 縮寫  <button type="button" class="btn btn-danger" @click="trap">點擊就會觸發的陷阱</button> -->
</div>

// JS
new Vue({
  el: '#app',
  data: {
  },
  methods: {
    trap() {
      alert('真心鎮的追捕人員踩到了陷阱')
    }
  }
})

練習5

Vue v-model codepen

// html
<div id="app" class="container">
  我的名字：<input type="text" v-model="whoAmI.name"> <br>
  <!-- 請用 input type="text" + v-model-->
  我的性別：<select v-model="whoAmI.gender">
    <option disabled value="">請選擇</option>
    <option v-for="(item,key) in genders" :value="item" :key="item.index">{{ item }}</option>   
  </select> <br>
  <!-- 請用 select + v-model，搭配 genders 資料集 -->
  我的技能列表：
  <div v-for="(item,key) in skills">
    <input type="checkbox" v-model="whoAmI.skills" :value="item" :id="item" :key="item.id">
    <label >{{ item }}</label>    
  </div> 
  <!-- 請用 checkbox + v-model，搭配 skills 資料集 -->
  <hr>
  {{ whoAmI }}
</div>

// JS
new Vue({
  el: '#app',
  data: {
   whoAmI: {
     name: '',
     gender: '',
     skills: []
   },
   genders: ['男', '女', '不限制'],
   skills: ['ES6', '水之呼吸', '伸縮自如的', '認真系列']
  }
})